<template>
    <!-- 查看详情 -->
    <el-dialog class="ba-operate-dialog" :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">{{ t('Info') }}</div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'">
                <el-descriptions :column="1" border>
                    <el-descriptions-item :label="t('user.order.userId')">
                        {{ baTable.form.extend!.info.userId }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.mobile')">
                        {{ baTable.form.extend!.info.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.userName')">
                        {{ baTable.form.extend!.info.userName }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.agentUserId')">
                        {{ baTable.form.extend!.info.agentUserId }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.agentMobile')">
                        {{ baTable.form.extend!.info.agentMobile }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.agentUserName')">
                        {{ baTable.form.extend!.info.agentUserName }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.orderTradeNo')">
                        {{ baTable.form.extend!.info.orderTradeNo }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.goodsName')">
                        {{ baTable.form.extend!.info.goodsName }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.orderStateName')">
                        {{ baTable.form.extend!.info.orderStateName }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.goodsPrice')">
                        {{ baTable.form.extend!.info.goodsPrice }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.payPrice')">
                        {{ baTable.form.extend!.info.payPrice }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.orderDuration')">
                        {{ baTable.form.extend!.info.orderDuration }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.discount')">
                        {{ baTable.form.extend!.info.discount }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.discountPrice')">
                        {{ baTable.form.extend!.info.discountPrice }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.debtPrice')">
                        {{ baTable.form.extend!.info.debtPrice }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.startTime')">
                        {{ baTable.form.extend!.info.startTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.endTime')">
                        {{ baTable.form.extend!.info.endTime }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('Create time')">
                        {{ timeFormat(baTable.form.extend!.info.createTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item :label="t('user.order.remark')">
                        {{ baTable.form.extend!.info.remark }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue'
import { useI18n } from 'vue-i18n'
import type BaTable from '/@/utils/baTable'
import { timeFormat } from '/@/utils/common'

const baTable = inject('baTable') as BaTable

const { t } = useI18n()
</script>

<style scoped lang="scss">
.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }
    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>
